<template>
  <!-- 填写资料页 子组件 -->

  <div>
    <slot name="card">
      <div class="card">
        <!-- 头部 -->
        <slot name="card-content">
          <div class="formdata">
            <!-- 填写资料页 -->
            <div>
              <span>公司全称：</span>
              <input type="text" v-model="userdata.company_name" />
            </div>
            <div>
              <span>法人姓名：</span>
              <input type="text" v-model="userdata.legal_person_name" />
            </div>

            <!-- 图片上传 -->
            <div class="uploadere_content flex">
              <span>法人身份证：</span>
              <div class="upload-box">
                <img
                  v-show="legal_person_face_card"
                  :src="legal_person_face_card"
                  name="legal_person_face_card"
                  class="avatar"
                  alt=""
                />
                <input
                  type="file"
                  @change="beforeAvatarUpload"
                  accept="image/*"
                />
                <label
                  v-show="!legal_person_face_card"
                  class="avatar-uploader-icon"
                >
                  <div>
                    <i class="icon-camera"></i>
                    <span>身份证正面</span>
                  </div>
                </label>
              </div>

              <div class="upload-box">
                <img
                  v-show="legal_person_back_card"
                  name="legal_person_back_card"
                  :src="legal_person_back_card"
                  class="avatar"
                />
                <input
                  id="files"
                  type="file"
                  @change="beforeAvatarUpload"
                  accept="image/*"
                />
                <label
                  v-show="!legal_person_back_card"
                  class="avatar-uploader-icon"
                >
                  <div>
                    <i class="icon-camera"></i>
                    <span>身份证背面</span>
                  </div>
                </label>
              </div>
            </div>

            <div class="uploadere_content flex">
              <span>营业执照：</span>
              <div class="upload-box">
                <img
                  name="business_license"
                  v-show="business_license"
                  :src="business_license"
                  class="avatar"
                />
                <input
                  type="file"
                  @change="beforeAvatarUpload"
                  accept="image/*"
                />
                <label v-show="!business_license" class="avatar-uploader-icon">
                  <div>
                    <i class="icon-camera"></i>
                    <span>营业执照</span>
                  </div>
                </label>
              </div>
              <div class="avatar-uploader">
                <label class="avatar-uploader-icon" style="border: none">
                </label>
              </div>
            </div>

            <div>
              <span>负责人姓名：</span>
              <input type="text" v-model="userdata.principal_name" />
            </div>
            <div>
              <span>负责人微信号：</span>
              <input type="text" v-model="userdata.principal_wechat_account" />
            </div>
            <div>
              <span>负责人手机：</span>
              <input type="number" v-model="userdata.principal_phone" />
              <span class="verify" @click.stop="btn_verify"> 获取验证码 </span>
            </div>
            <div>
              <span>验证码：</span>
              <input type="text" v-model="userdata.code" />
            </div>
            <div class="btn" @click="subBtn">提交申请</div>
          </div>
        </slot>
      </div>
    </slot>
  </div>
</template>

<script>
import "@/global-style/style.less";
import { post2, post } from "@/service/request.js";

export default {
  data() {
    return {
      // 完善资料
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      legal_person_face_card: "", //正面
      legal_person_back_card: "", //方面
      business_license: "", //营业
      iconColor: "rgb(73, 191, 141)",
      phone: "",
      userdata: {
        company_name: "",
        legal_person_name: "",
        legal_person_face_card: "", // 身份正面
        legal_person_back_card: "", // 身份反面
        business_license: "", // 营业执照
        principal_name: "",
        principal_wechat_account: "",
        principal_phone: "",
        code: "",
      },
    };
  },
  props: ["active"],
  methods: {
    next() {
      this.$emit("activeChange", 1);
    },
    btn_verify() {
      if (!this.userdata.principal_phone) {
        this.$message.error("请输入手机号");
      } else if (this.userdata.principal_phone) {
        post(
          "center_region/api/travel_agency/setbasicinformationprincipalphonesendsmscode",
          {
            principal_phone: this.userdata.principal_phone,
          }
        ).then((res) => {
          if (res.data.code == 4000) {
            // if (res.data.msg == "资料审核中") {
            this.$message.error(res.data.msg);
            // }
          }
          console.log(res);
        });
      }
    },
    beforeAvatarUpload(fileEvent) {
      // console.log(file, fileEvent);
      let file = fileEvent.target.files[0];

      let imageName = fileEvent.path[1].childNodes[0].name;
      this[imageName] = URL.createObjectURL(file);
      // console.log(imageName);
      file.key = "file";

      const isJPG = file.type === "image/jpeg" || "image/png" || "image/jpg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传的文件必须为 图片 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }

      let fd = new FormData();
      fd.append("file[]", file); //传file[]  后台需要带下标
      post2("center_region/api/travel_agency/uploadfile", fd)
        .then((res) => {
          // console.log(res);
          // 保存到合适格式中;
          if (this[imageName] == this.legal_person_face_card) {
            this.userdata.legal_person_face_card = res.data.data[0];
            // console.log(this.userdata.legal_person_face_card);
          } else if (this[imageName] == this.legal_person_back_card) {
            this.userdata.legal_person_back_card = res.data.data[0];
          } else {
            this.userdata.business_license = res.data.data[0];
          }
        })
        .catch((error) => {
          console.log(error);
        });
      return isJPG && isLt2M;
    },
    subBtn() {
      if (
        (this.userdata.company_name == "") &
        (this.userdata.legal_person_name == "") &
        (this.userdata.legal_person_face_card == "") &
        (this.userdata.legal_person_back_card == "") &
        (this.userdata.business_license == "") &
        (this.userdata.principal_name == "") &
        (this.userdata.principal_wechat_account == "") &
        (this.userdata.principal_phone == "") &
        (this.userdata.code == "")
      ) {
        this.$message.error("请完成资料的填写");
      } else {
        post(
          "center_region/api/travel_agency/settravelagencybasicinformation",
          this.userdata
        )
          .then((res) => {
            this.$message(res.data.msg);
            console.log(res);
          })
          .catch((error) => {
            console.log(error);
          });
      }
      //   // this.$router.replace({ name: "CircuitIndex" });
    },
  },
};
</script>

<style lang='less'>
.formdata {
  .flex {
    justify-content: flex-start;
  }
  & > div {
    margin: 0 auto;
    width: 16vw;
    margin-bottom: 1.5vh;
    position: relative;
    & > input {
      height: 4vh;
      width: 80%;
    }
    & > span:not(.verify) {
      position: absolute;
      width: 8vw;
      line-height: 4vh;
      text-align: right;
      left: -8.4vw;
      top: 0%;
      color: rgb(168, 164, 164);
    }
    & > span.verify {
      position: absolute;
      cursor: pointer;
      width: 8vw;
      right: 0;
      top: 2%;
      line-height: 4vh;
      color: rgb(168, 164, 164);
    }
  }
  .btn {
    cursor: pointer;
    width: 11vw;
    position: relative;
    background-color: #07c160;
    color: #ffffff;
    border-radius: 4px;
    line-height: 4vh;
    text-align: center;
    height: 4vh;
  }
}

.uploadere_content {
  position: relative;
  left: 1vw;
  justify-content: flex-end;
  & > .avatar-uploader > .avatar {
    width: 5.9vw;
    height: 5.9vw;
    border: none;
  }
  .upload-box {
    margin-right: 10px;
  }
}
.formdata > div.uploadere_content > span {
  position: absolute;
  width: 8vw;
  line-height: 4vh;
  text-align: right;
  left: -9.5vw;
  top: 0%;
}

.icon-camera {
  display: block;
  margin: 0 auto;
  height: 2vh;
  width: 2vh;
  background: url("../../assets/icon-camera.png") no-repeat;
  background-size: 100% 100%;
}
</style>